<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>
    <link rel="stylesheet" href="../../static/pkg/bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <script src="../../static/pkg/jQuery-3.7.1/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="../../static/css/admin/index.css">

</head>
<body>
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link active disabled" href="#">
              <?php
                include_once "../../models/core_mysql.php";
                if(isset($_SESSION["adminName"])){
                  echo "当前操作员：" . $_SESSION["adminName"];
                }else{
                  echo "<script>window.location.href = './login.html';</script>";
                }
              ?>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="./useradd.html">添加用户</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="./logout.php">退出</a>
        </li>
    </ul>

    <div class="container">
        <!-- <h2>这是管理员首页页面，一下展示所有的用户信息：</h2> -->

        <table class="table">
            <thead class="thead-dark">
              <tr>
                <th scope="col">uid(工号)</th>
                <th scope="col">username(用户名)</th>
                <th scope="col">is_sign(是否打卡)</th>
                <th scope="col">sign_time(最近打卡时间)</th>
              </tr>
            </thead>

            <tbody id="userList">
              <!-- <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr> -->
            </tbody>
          </table>
    </div>

    
    <script src="../../static/pkg/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>

    <script>
      // php 文件从后台提取全部的用户信息，放入到一个二维数组里面，再转化成 json 数据，可以改变显示到前端的 html 页面上了(之前的 part14 不行，可能是和浏览器有关系)
      fetch('../../apis/admin/getUserList.php', {
          method: 'GET',
          mode: 'cors',
          credentials: "include"
      })
      // fetch('../../apis/admin/getUserList.json')
      .then(response =>{
        return response.json();
      })
      .then(json_data =>{
          // console.log(json_data[0][2]);
        
        // 循环添加进去
        let userList = document.querySelector("#userList"); // 前面的 # 表示 userList 是一个 id
        userList.innerHTML = ""; // 先清空一下，要把之前的数据给覆盖的哦(注意得加上 innerHTML 的哦)

        // var is_sign = '';
        // json_data 是一个二维数组：$jsonArray = array(), array_push($jsonArray, array($uid, $username, $is_sign, $sign_time))
        // 下面遍历的是一个二维数组 json_data，那么每一个元素 element 就是一个一维数组了哦
        json_data.forEach(element => {
                              // error
                              // // username
                              // userList.innerHTML += `<tr>
                              //     <th scope="row">${count}</th>
                              //     <td>${element[0]}</td>`;
                              // // is_sign
                              // if(element[1] == 0){
                              //   userList.innerHTML += `<td>未打卡</td>`;
                              // }else if(element[1] == 1){
                              //   userList.innerHTML += `<td>已打卡</td>`;
                              // }
                              // // sign_time
                              // userList.innerHTML += `
                              //   <td>${element[2]}</td>
                              // </tr>`;
          if(element[2] == 1)
            is_sign = '已打卡';
          else 
            is_sign = '未打卡';
          userList.innerHTML += `
            <tr>
              <th scope="row">${element[0]}</th>
              <td>${element[1]}</td>
              <td>${is_sign}</td>
              <td>${element[3]}</td>
            </tr>        
          `;
        });
      });

    </script>

</body>
</html>